import React, { useEffect, useState } from 'react'
import { Table, Tag, Button, Space, Modal, message, Switch } from 'antd'
import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import { delRole, delRoleChild, getRole, patchRole, patchRoleChild } from '@/api/authority'


export default function Role() {
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'name',
        },
        {
            title: '权限名称',
            dataIndex: 'title',
            key: 'age',
        },
        {
            title: '权限路径',
            dataIndex: 'key',
            render: (key) => {
                return (
                    <Tag color="orange-inverse">{key}</Tag>
                )
            },
        },
        {
            title: '操作',
            render: (item) => {
                return (
                    <div>
                        <Space>
                            <Switch checkedChildren="开启" unCheckedChildren="关闭"
                                defaultChecked={item.pagepermisson}
                                disabled={item.pagepermisson === undefined}
                                onClick={async (checked, event) => {
                                    console.log(checked, item)
                                    let cur = checked ? 1 : 0
                                    console.log(cur)
                                    if (item.grade === 1) {
                                        await patchRole({
                                            id: item.id,
                                            pagepermisson: cur
                                        })

                                    } else {
                                        await patchRoleChild({
                                            id: item.id,
                                            pagepermisson: cur
                                        })
                                    }
                                    message.open({
                                        type: 'success',
                                        content: '操作成功',
                                    })
                                }}
                            />
                            <Button danger shape="circle"
                                icon={<DeleteOutlined />}
                                onClick={() => {
                                    confirmHandel(item)
                                }}
                            />
                        </Space>
                    </div>
                )
            },
        }
    ]
    const { confirm } = Modal
    const [dataSource, setdataSource] = useState([])
    useEffect(() => {
        loadRole()
    }, [])
    // 获取角色列表
    const loadRole = async () => {
        const { data } = await getRole()
        if (data[0].children.length === 0) {
            data[0].children = ''
        }
        setdataSource(data)
    }
    // 弹框
    const confirmHandel = (item) => {
        confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: '是否删除该菜单',
            okText: '确认',
            onOk: () => { delHandel(item) },
            cancelText: '取消',
            onCancel: () => {
                console.log(2)
            }
        })
    }
    // 删除函数
    const delHandel = async (item) => {
        if (item.grade === 1) {
            await delRole(item)
        } else {
            await delRoleChild(item)
        }
        message.open({
            type: 'success',
            content: '删除成功',
        })

        loadRole()
    }
    return (
        <div>
            <Table
                dataSource={dataSource}
                columns={columns}
                pagination={
                    {
                        pageSize: 5
                    }
                }
            />
        </div>
    )
}
